<template>
  <div class="chat-content-warp">
    <!-- 聊天中时间提示部分 -->
    <div class="chat-date">
      <div
        class="chat-time"
        v-if="chatDate != ''&&chatDate != null &&chatDate != undefined"
      >{{chatDate}}</div>
    </div>

    <!-- OP聊天内容展示部分 -->
    <div class="chat-object" v-if="sendObject">
      <div class="chat-object-picture">
        <img :src="pictureUrl" />
      </div>
      <div class="chat-object-text">
        <span class="chat-object-name">{{chatObject}}</span>
        <span class="chat-object-content" v-html="content" v-if="type == '1'"></span>

        <span class="chat-object-content chat-object-ontactOP-box" v-if="type == '3'">
          <img :src="imgLinkUrl" class="chat-object-ontactOP" />
          {{content}}
          <fy-button class="chat-object-ontactOP-btn" value="联系OP"></fy-button>
        </span>
      </div>
    </div>

    <!-- 用户方聊天内容展示部分 -->
    <div class="chat-self" v-if="!sendObject">
      <div class="chat-self-box">
        <div class="chat-self-text">
          <span :class="[ chatDate, 'chat-self-sate-' + sendState]" v-if="sendState == 'failure'" @click="retransmission">&nbsp;&nbsp;&nbsp;</span>
          <span :class="[ chatDate, 'chat-self-sate-' + sendState]" v-if="sendState == 'sending'">&nbsp;&nbsp;&nbsp;</span>
          <span :class="[ chatDate, 'chat-self-sate-' + sendState]" v-if="sendState == 'unread'">未读</span>
          <span :class="[ chatDate, 'chat-self-sate-' + sendState]"  v-if="sendState == 'read'">已读</span>

          <!-- 用户方聊天内容展示气泡部分 -->
          <span class="chat-self-content" v-html="content" v-if="type == '1'"></span>

          <!-- 用户方聊天内容展示连接部分 -->
          <span class="chat-self-content chat-self-ontactOP-box" v-if="type == '3'">
            <img :src="imgLinkUrl" class="chat-self-ontactOP" />
            {{content}}
          </span>
        </div>

        <!-- 用户方聊天头像 -->
        <div class="chat-self-picture">
          <img :src="pictureUrl" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'fyChatContent',
  data() {
    return {
      chatDate: this.chatTime,
    }
  },
  props: {
    /* 发送对象 */
    sendObject: {
      type: Boolean,
      default: false,
    },

    /* 判断气泡类型
        文字：1
        图片：2
        链接：3
    */
    type: {
      type: String,
      default: '1',
    },

    /* OP昵称 */
    chatObject: {
      type: String,
      default: '',
    },

    /* 聊天内容 */
    content: {
      type: String,
      default: '',
    },

    /* 阅读状态 
        已读：read
        未读：unread
        失败：failure
        发送中：sending
    */
    sendState: {
      type: String,
      default: '',
    },

    /* 链接图片路径*/
    imgLinkUrl: {
      type: String,
      default: '',
    },

    /* 头像图片路径*/
    pictureUrl: {
      type: String,
      default: '',
    },

    /* 显示时间*/
    chatTime: {
      type: String,
      default: '',
    },
  },

  methods: {
     myTime(date) {
      if (date != '') {
         let time  = new Date(date);
         let month = time.getMonth()+1;
         let day = time.getDate();
         let hour = time.getHours();
         let mm  = time.getMinutes();
         this.chatDate = month + '月' + day + '日 ' + hour + ':' + mm
      }
    },

    retransmission() {
      this.$emit('failure')
    }
  },

  mounted() {
    this.myTime(this.chatDate)
  },
}
</script>

<style lang="scss" scoped>
// @import url('~@css/public/reset.scss');
@import '@css/globalCite/defaultVariable.scss';
@import '@css/globalCite/defaultThemeVariable.scss';
@import '@css/globalCite/themeMixin.scss';
@import '@css/globalCite/bgImageMixin.scss';
@import '~@css/components/chatContent/fyChatContent.scss';

.chat-self-sate- {
  display: inline-block;
  margin: 4px 0;

  &read {
    line-height: 40px;
    margin: 0;
    font-size: $font-size-14;
    color: $color-999;
    vertical-align: top;
  }

  &unread {
    line-height: 40px;
    margin: 0;
    font-size: $font-size-14;
    color: $color-fb617e;
    vertical-align: top;
  }

  &failure {
    // @include themify() {
    //   background: themed('chat-send-fail-icon') 10px;
    //   background-size: 75%;
    // }
    width: 23px;
    height: 23px;
    @include bg-image($fy-chat-send-fail-icon);
  }

  &sending {
    width: 23px;
    height: 23px;
    @include themify() {
      background: themed('chat-sending-icon');
      background-size: 100%;
    }
  }
}
</style>
